<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>美发开单</title>
<script type="text/javascript">
var ctx = "${ctx}";
var employeeId = "${sessionScope.wxEmp.employeeId}";
</script>
<script src="assets/js/wx/billing_flow.js"></script>
</head>
<body>
	<div style="padding-bottom:40px;">
		<h4 class="app-title">添加服务项目
		<c:if test="${not empty vipId}"><span class="am-fr" onclick="vipDetail();" style="cursor: pointer;">查看会员详情&nbsp;&nbsp;<span class="am-icon-angle-right"></span></span></c:if>
		<c:if test="${empty vipId}"><span class="am-fr">非会员&nbsp;&nbsp;</span></c:if> 
		</h4>
		<form>
		<input id="vipId" name="vipId" type="hidden" value="${vipId}"></input>
		<input id="shopId" name="shopId" type="hidden" value="${sessionScope.wxEmp.shopId}"></input>
		<input id="orderInfoId" name="orderInfoId" type="hidden" value="${orderInfo.orderInfoId}"></input>
		<input id="orderScheduleId" name="orderScheduleId" type="hidden" value="${orderScheduleId}"></input>
		<div class="am-g am-g-striped">
			<c:forEach items="${orderInfo.detailList}" var="d" varStatus="ds">
				<div class="am-u-sm-12 am-text-blue" 
				<c:choose>
				<c:when test="${not empty d.packageId}">data-id="${d.packageId}"</c:when>
				<c:when test="${not empty d.mdseId}">data-id="${d.mdseId}" id="${d.mdseId}"</c:when>
				<c:otherwise>data-id="${d.serviceItemId}"</c:otherwise>
				</c:choose>>
					<input name="detailList[0].orderDetailId" type="hidden" value="${d.orderDetailId}"></input>
					<input name="detailList[0].serviceItemId" type="hidden" value="${d.serviceItemId}"></input>
					<input name="detailList[0].packageId" type="hidden" value="${d.packageId}"></input>
					<input name="detailList[0].mdseId" type="hidden" value="${d.mdseId}"></input>
					<input name="detailList[0].mdseServiceName" type="hidden" value="${d.mdseServiceName}"></input>
					<input name="detailList[0].mdseNum" type="hidden" value="${d.mdseNum}"></input>
					<input name="detailList[0].price" type="hidden" value="${d.price}"></input>
					<input name="detailList[0].noVipPrice" type="hidden" value="${d.noVipPrice}"></input>
				<ul class="am-padding-xs">
					<li class="am-fl am-text-bold">项目<span class="item-desc-num">一</span>：<span class="item-name">${d.mdseServiceName} <c:if test="${not empty d.mdseId}">x${d.mdseNum}</c:if><c:if test="${d.orderDetailId==orderDetailId}">-当前</c:if></span></li>
					<li class="am-fr">
					<c:if test="${d.state=='10A'}"><a href="javascript:void(0)">删除</a></c:if>
					</li>
				</ul>
				<ul class="am-avg-sm-2 emp-sele-ul">
					<c:forEach items="${d.scheList}" var="s" varStatus="status">
					<input name='detailList[0].scheList[${status.index}].orderScheduleId' type='hidden' value='${s.orderScheduleId}'></input>
					<input name='detailList[0].scheList[${status.index}].baseAmount' type='hidden' value='${s.baseAmount}'></input>
					<c:if test="${empty d.mdseId}">
					<li class='am-padding-sm'>请选择${s.roleName}：</li>
					<li class='am-padding-sm'>
					<input name='detailList[0].scheList[${status.index}].roleId' type='hidden' value='${s.roleId}'></input>
					<input name='detailList[0].scheList[${status.index}].state' type='hidden' value='${s.state}'></input>
					<select name='detailList[0].scheList[${status.index}].employeeId' class='item-emp-sele' data-am-selected="{btnWidth: '100%',maxHeight: 100,btnStyle: 'secondary'<c:if test="${s.state!='10A'}">,disabled:true</c:if>}">
						<option value="${s.employeeId}">${s.employeeName}(${s.titleName})</option>
					</select>
					</li>
					</c:if>
					</c:forEach>
				</ul>
			</div>
			</c:forEach>
		</div>
		</form>
		<c:if test="${empty orderInfo||orderInfo.payState=='10X'}"> 
		<ul class="am-avg-sm-2 am-text-center">
			<li class="am-padding-sm">
				<button class="am-btn am-round am-padding-0 am-border-0 app-half-width" data-am-modal="{target: '#item-modal',maxHeight: 100}"><img src="assets/img/icon-round-plus.png" class="app-full-width"></button>
				<span class="am-block am-text-bold am-text-yellow">添加项目</span>
			</li>
			<li class="am-padding-sm">
				<button class="am-btn am-round am-padding-0 am-border-0 app-half-width" data-am-modal="{target: '#good-modal',maxHeight: 100}"><img src="assets/img/icon-round-plus.png" class="app-full-width"></button>
				<span class="am-block am-text-bold am-text-yellow">添加商品</span>
			</li>
		</ul>
		</c:if>
		
		<div class="am-g am-bg-grey">
			<div class="am-u-sm-12 am-text-blue am-text-bold am-padding-sm">
				选择下一步服务人员
			</div>
			<div class="am-u-sm-12 am-u-end am-padding-sm">
				<select id="next-service-emp" data-am-selected="{btnWidth: '100%',btnStyle: 'secondary',maxHeight: 100}">
					
				</select>
			</div>
		</div>
		<ul class="am-avg-sm-3 app-fix-bottom">
			<li><button id="change-btn" class="am-btn am-btn-lg am-btn-landiao am-btn-block" <c:if test="${empty orderInfo.orderInfoId}">disabled="disabled"</c:if>>转单</button></li>
			<li>
			<c:choose>
				<c:when test="${empty orderInfo.orderInfoId}"><button id="next-btn" class="am-btn am-btn-lg am-btn-white am-btn-block">开单</button></c:when>
				<c:when test="${empty orderScheduleId}"><button id="next-btn" class="am-btn am-btn-lg am-btn-white am-btn-block" disabled="disabled">下一步</button></c:when>
				<c:otherwise><button id="next-btn" class="am-btn am-btn-lg am-btn-white am-btn-block">下一步</button></c:otherwise>
			</c:choose>
			</li>
			<li><button id="pay-btn" class="am-btn am-btn-lg am-btn-landiao am-btn-block" <c:if test="${empty orderInfo.orderInfoId || orderInfo.payState=='10A'}">disabled="disabled"</c:if>>结账</button></li>
		</ul>
	</div>
	<div class="am-modal am-modal-landiao" tabindex="-1" id="item-modal">
		<div class="am-modal-dialog">
			<div class="am-modal-hd am-text-left">添加服务项目 </div>
			<div class="am-modal-bd am-text-left am-padding-0">
					<ul class="am-list am-list-static am-margin-0">
						<li>
							<ul class="am-avg-sm-2">
								<li class="am-padding-sm">请选择项目分类</li>
								<li class="am-padding-xs">
								<select id="item-cate-sele"
									data-am-selected="{btnWidth: '100%',btnStyle: 'secondary',maxHeight: 100}">
								</select></li>
							</ul>
						</li>
						<li>
							<ul class="am-avg-sm-2">
								<li class="am-padding-sm">请选择项目</li>
								<li class="am-padding-xs">
								<select id="item-sele" data-am-selected="{btnWidth: '100%',btnStyle: 'secondary',maxHeight: 100}">
								</select></li>
							</ul>
						</li>
						<li class="am-text-center">
							<button id="add-item-btn" class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg" type="button">提交</button>
						</li>
					</ul>
			</div>
		</div>
	</div>
	<div class="am-modal am-modal-landiao" tabindex="-1" id="good-modal">
		<div class="am-modal-dialog">
			<div class="am-modal-hd am-text-left">请选择商品 </div>
			<div class="am-modal-bd am-text-center am-padding-0">
					<ul class="am-list am-list-static am-margin-0">
						<li>
						<select id="mdse-sele" data-am-selected="{btnWidth: '100%',btnStyle: 'secondary',maxHeight: 100}">
							<c:forEach items="${mdses}" var="m">
								<option value="${m.mdseId}"
								<c:if test="${not empty vipId}">data-price="${m.vipPrice}"</c:if>
								<c:if test="${empty vipId}">data-price="${m.noVipPrice}"</c:if> 
								data-no-vip-price="${m.noVipPrice}">${m.name}</option>
							</c:forEach>
						</select></li>
						<li>
							<button id="decrease" class="am-btn am-btn-landiao am-radius am-padding-horizontal-xs am-padding-vertical-0" type="button">&nbsp;-&nbsp;</button>
								x<span id="mdse-num">1</span>
							<button id="increase" class="am-btn am-btn-landiao am-radius am-padding-horizontal-xs am-padding-vertical-0" type="button">&nbsp;+&nbsp;</button>
								￥<span id="mdse-price">150</span>
						</li>
						<li>
							<button id="add-mdse-btn" class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg" type="button">提交</button>
						</li>
					</ul>
			</div>
		</div>
	</div>
	<div style="display: none" id="item_temp">
		<div class="am-u-sm-12 am-text-blue" data-id="{0}">
		<input name="detailList[0].serviceItemId" type="hidden"></input>
		<input name="detailList[0].packageId" type="hidden"></input>
		<input name="detailList[0].mdseId" type="hidden"></input>
		<input name="detailList[0].mdseServiceName" type="hidden" value="{1}"></input>
		<input name="detailList[0].mdseNum" type="hidden" value="{2}"></input>
		<input name="detailList[0].price" type="hidden" value="{3}"></input>
		<input name="detailList[0].noVipPrice" type="hidden" value="{4}"></input>
				<ul class="am-padding-xs">
					<li class="am-fl am-text-bold">项目<span class="item-desc-num">一</span>：<span class="item-name">{1}</span></li>
					<li class="am-fr"><a href="javascript:void(0)">删除</a></li>
				</ul>
				<ul class="am-avg-sm-2 emp-sele-ul">
					
				</ul>
			</div>
	</div>
	<c:if test="${not empty vipId}">
	<div id="vip-detail" class="am-offcanvas">
		<div class="am-offcanvas-bar am-offcanvas-bar-flip" style="width:100%;background-color:#fff;">
			<div class="am-offcanvas-content am-padding-0">
				<a href="javascript:void(0)" class="close-offcanvas-btn"><h4 class="app-title-secondary">会员详情<span class="am-fr am-icon-angle-left"></span></h4></a>
				<div class="am-offcanvas-frame" style="position:absolute;top:31px;left:0;right:0;bottom:0;">
					<iframe frameborder="0" style="position:absolute;width:100%;height:100%" src="weixin/employee/vipDetail/${vipId}?isIframe"></iframe>
				</div>
			</div>
		</div>
	</div>
	<div id="service-record-detail" class="am-offcanvas">
		<div class="am-offcanvas-bar am-offcanvas-bar-flip" style="width:100%;background-color:#fff;">
			<div class="am-offcanvas-content am-padding-0">
				<a href="javascript:void(0)" class="close-offcanvas-btn"><h4 class="app-title-secondary">服务记录<span class="am-fr am-icon-angle-left"></span></h4></a>
				<div class="am-offcanvas-frame" style="position:absolute;top:31px;left:0;right:0;bottom:0;">
					<iframe frameborder="0" style="position:absolute;width:100%;height:100%" src="weixin/employee/serviceRecord/${vipId}"></iframe>
				</div>
			</div>
		</div>
	</div>
	</c:if>
	<!-- 
	<div class="am-u-sm-12 am-text-blue">
				<ul class="am-padding-xs">
					<li class="am-fl am-text-bold">项目二：资深发型师剪发</li>
					<li class="am-fr"><a href="javascript:void(0)">删除</a></li>
				</ul>
				<ul class="am-avg-sm-2">
					<li class="am-padding-sm"><select data-am-selected="{btnWidth: '100%',btnStyle: 'secondary'}">
						<option value="1">张青（总监）</option>
					</select></li>
					<li class="am-padding-sm"><select data-am-selected="{btnWidth: '100%',btnStyle: 'secondary'}">
						<option value="1">王春风（总监）</option>
					</select></li>
				</ul>
	</div>
 -->
</body>
</html>
